<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绿地养护</title>
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/globle.css" />
		<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css"/>
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<style>
			body {
				/*padding-top: 25px;*/
			}
			span {
				margin: 10px;
			}
			.Tabl {
				height: 10px;
				width: 88%;
				font-size: 14px;
				/*font-weight: bold;*/
				text-align: left;
				margin-left: 6%;
			}
			.Td1 {
				color: #B8B8B8;
				width: 70px;
			}
			.Td2 {
				color: #000000;
				text-align: left;
				width: 84px;
			}
			.Hr {
				/*height: 1px;*/
				/*width: 90%;*/
				/*background-color: #B8B8B8;*/
				background-color: #DDDDDD;
				margin-left: 2%;
			}
			.Butt {
				border: 1px solid #B8B8B8;
				border-radius: 20px;
				color: #FFFFFF;
				height: 17px;
				width: 17px;
				outline: none;
			}
			.TabImg {
				height: 150px;
				width: 96%;
				margin-left: 2%;
				border: 10px solid #D8D8D8;
			}
			.TdImg1 {
				height: 110px;
				width: 90px;
			}
			.TdImg2 {
				height: 110px;
				width: 90px;
			}
			.ButAdd {
				height: 110px;
				width: 100px;
				font-size: 100px;
				color: #FFFFFF;
				background-color: #B8B8B8;
			}
			.TabL {
				height: 75px;
				width: 88%;
				font-size: 16px;
				font-weight: bold;
				text-align: left;
				margin-left: 6%;
			}
			.ButL {
				height: 40px;
				width: 100%;
				background-color: #D0D0D0;
				position: fixed;
				bottom: 0;
			}
			.Td3 {
				text-align: center;
				width: 50%;
			}
			select {
				appearance: none;
				-moz-appearance: none;
				-webkit-appearance: none;
				border: none;
				background: none;
			}
		</style>
	</head>
	<body>
		<input type="hidden" id="id" name="id"/>
		
		<button style="background-color: #F2F2F2;height: 47px;width: 100%;font-size: 18px;">基本信息</button>
		<table class="Tabl"style="margin-top: 20px">
			<!--<tr>-->
				<td class="Td2">所属标段:</td>
				<td class="Td1">
				<input type="text" readonly="readonly" id="ssbd" value=""/>
				</td>
			<!--</tr>-->
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td2">绿地名称:</td>
				<td class="Td1">
				<input type="text" readonly id="ldmc" value=""/>
				</td>
			</tr>
		</table>
		
		<button style="background-color: #F2F2F2;height: 47px;width: 100%;margin-top: 20px;font-size: 18px;">观测信息</button>
		<table class="Tabl" style="margin-top: 20px">
			<tr>
				<td class="Td2">发现时间:</td>
				<td class="Td1">
				<input type="text"readonly id="fxsj" value=""/>
				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td2">病/虫害类型:</td>
				<td class="Td1">
				<input type="text"readonly id="bchlx" value=""/>
				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td2">病/虫害描述:</td>
				<td class="Td1">
				<input type="text"readonly id="bchms" value=""/>
				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td2">虫灾地点:</td>
				<td class="Td1">
				<input type="text"readonly id="czdd" value=""/>
				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td2">坐标:</td>
				<td class="Td1">
				<input type="text"readonly id="zb" value=""/>
				</td>
			</tr>
		</table>	
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td2">感染植物:</td>
				<td class="Td1">
				<input type="text"readonly id="grzw" value=""/>
				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td2">感染数量:</td>
				<td class="Td1">
				<input type="text"readonly id="grsl" value=""/>
				</td>
			</tr>
		</table>
		
		<button style="background-color: #F2F2F2;height: 47px;width: 100%;margin-top: 20px;font-size: 18px;">处置信息</button>
		<table class="Tabl" style="margin-top: 20px">
			<tr>
				<td class="Td2">药剂名称:</td>
				<td class="Td1">
				<input type="text"readonly id="yjmc" value=""/>
				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td2">用量:</td>
				<td class="Td1">
				<input type="text"readonly id="yl" value=""/>
				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td2">处置效果:</td>
				<td class="Td1">
				<input type="text"readonly id="czxg" value=""/>
				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td2">备注:</td>
				<td class="Td1">
				<input type="text"readonly id="bz" value=""/>
				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td2">处置时间:</td>
				<td class="Td1">
				<input type="text"readonly id="czsj" value=""/>
				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td2">处置方法:</td>
				<td class="Td1">
				<input type="text"readonly id="czff" value=""/>
				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td2">施工单位:</td>
				<td class="Td1">
				<input type="text"readonly id="sgdw" value=""/>
				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<div id="ls">
		<table class="Tabl" >
		<tr>
			
				<td class="Td2" style="font-size: 10px">发病图片</td>
				
			</tr>
			<tr>
			
				<td class="Td2" v-for="(im,index) in imagelist" ><img style="width: 80px;height: 80px" :src="BaseServiceUrl+im.badPhoto" id="image" ></td>
				
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl" >
		<tr>
			
				<td class="Td2" style="font-size: 10px">治愈图片</td>
				
			</tr>
			<tr>
			
				<td class="Td2" v-for="(imgs,index) in imglist" ><img style="width: 80px;height: 80px" :src="BaseServiceUrl+imgs.goodPhoto" id="imagesss" ></td>
				
			</tr>
		</table>
		</div>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td2"></td>
			</tr>
		</table>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script src="../../script/webuploader.min.js"></script>
	<script src="../../script/diyUpload.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/vue.js"></script>
	<script type="text/javascript">
		apiready = function() {
			var result = api.pageParam.result;
			$("#ssbd").val(result.areaName);
			$("#ldmc").val(result.greedLandName);
			$("#fxsj").val(result.startTime);
			$("#bchlx").val(result.types);
			$("#bchms").val(result.describes);
			$("#czdd").val(result.place);
			$("#zb").val(result.mapcoordinates);
			$("#grzw").val(result.plant);
			$("#grsl").val(result.quantity);
			$("#yjmc").val(result.medicament);
			$("#yl").val(result.dosages);
			$("#czxg").val(result.effect);
			$("#bz").val(result.remarks);
			$("#czsj").val(result.endTime);
			$("#czff").val(result.movement);
			$("#sgdw").val(result.construction);
			
			//			 $('#image').attr('src', result.photo); //图片链接（base64）
			if (result.insectBadPhotos.length != 0) {
				var app = new Vue({
					el : '#ls',
					data : {
						imagelist : result.insectBadPhotos,
						imglist  :  result.insectGoodPhotos
					},
					created : function() {
					
					
					},
					methods : {
					}
				});
			}
		}
	</script>
</html>
